<!--
 * @Descripttion:
 * @Author: Silence
 * @Date: 2023-08-12 11:23:16
 * @LastEditors: wahaha 2781216298@qq.com
 * @LastEditTime: 2023-08-16 10:09:54
-->
<template>
  <div class="Workorder-container">
    <div class="Workorder-mian">
      <div class="Workorder-input">
        <div class="WorkorderInput-compoents">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="工单编号:">
              <el-input v-model="formInline.user" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="工单状态:">
              <el-select v-model="formInline.region" placeholder="请选择" clearable>
                <el-option label="待办" value="shanghai" />
                <el-option label="进行" value="beijing" />
                <el-option label="取消" value="beijing" />
                <el-option label="完成" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="medium" class="WorkorderInput-btn-color" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="Workorder-btn">
        <el-button type="primary" icon="el-icon-circle-plus-outline" size="medium" class="custom-button" @click="newWorkorderAdd">新建</el-button>
      </div>
      <div class="Workorder-form">
        <div class="WorkorderForm-main">
          <el-table
            :header-cell-style="{background:'#f3f6fb'}"
            class="customer-table"
            :data="list"
            style="width: 100%"
            highlight-current-row
          >
            <el-table-column
              prop="date"
              label="序号"
              width="80"
            >
              <template slot-scope="{$index}">
                <span>
                  {{ (count.pageSize *(count.pageIndex-1)+$index +1) }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="taskCode"
              label="工单编号"
            />
            <el-table-column
              prop="innerCode"
              label="设置编号"
            />
            <el-table-column
              prop="desc"
              label="工单类型"
            />
            <el-table-column
              prop="desc"
              label="工单方式"
            />
            <el-table-column
              prop="taskStatus"
              label="工单状态"
            >
              <template slot-scope="{row}">
                <span v-if="row.taskStatus==1">待办</span>
                <span v-if="row.taskStatus==2">进行</span>
                <span v-if="row.taskStatus==3">取消</span>
                <span v-if="row.taskStatus==4">完成</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="userName"
              label="运维人员"
            />
            <el-table-column
              prop="createTime"
              label="创建日期"
            />
            <el-table-column
              label="操作"
              width="100"
            >
              <template slot-scope="scope">
                <el-button type="text" size="medium" @click="handleClick(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="Pagination">
            <div class="text">
              <span>共{{ }}条数据</span>
              <span>第{{ }}/{{ }}页</span>
            </div>
            <div class="btn">
              <el-button>上一页</el-button>
              <el-button>下一页</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <MaintenanceAdd v-if="dialogVisible" v-model="dialogVisible" />
    <maintenanceDetail v-if="dialogDetail" v-model="dialogDetail" />
  </div>
</template>
<script>
import MaintenanceAdd from './components/maintenanceAdd.vue'
import maintenanceDetail from './components/maintenanceDetail.vue'
export default {
  name: 'Operate',
  components: {
    MaintenanceAdd,
    maintenanceDetail
  },
  data() {
    return {
      dialogVisible: false, // 新建开关
      dialogDetail: false, // 表各详情的开关
      formInline: {
        user: '',
        region: ''
      },
      list: []
    }
  },
  methods: {
    // 控制表格的详情开关，穿给表单 开关数据， 让表单点击控制，通知 父这边 该值，双向绑定 弹窗的开启
    newWorkorderAdd() {
      this.dialogVisible = true
    },
    onSubmit() {
      console.log('submit!')
    },
    handleClick() {

    }
  }
}
</script>
<style lang='scss'  scoped>
.Workorder-mian{
  margin: 0px;
  .Workorder-input{
    margin-bottom: 17px;
  // background-color: red;
  .WorkorderInput-compoents{
::v-deep   .demo-form-inline{
    .el-input__inner{
      height: 36px;
      line-height: 36px;
    }
      .el-form-item__label{
        font-weight: 400;
      }
  }
  .WorkorderInput-btn-color{
     width: 80px;
    height: 36px;
    padding: 5px;
    border: 0px solid #fff;
   background-color: #5f84ff;
  }
    .WorkorderInput-btn-color:hover {
    background-color: #5373e0;
  }
}
  }
  .Workorder-btn{
    margin-bottom: 20px;
  // background-color: green;

  }
  .Workorder-form{
    margin-bottom: 20px;
  // background-color: yellow;
  .Pagination{
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 20px;
  .text{
    color: #dbdfe5;
    span:nth-child(1){
      padding-right: 7px;
    }
  }
}

  }
   .custom-button {
    width: 80px;
    height: 36px;
    padding: 5px;
    border: 0px solid #fff;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    }
   .custom-button:hover{
 background: linear-gradient(135deg,#ff7d43,#db3602)!important;
    }
}
</style>
<style lang="scss">
  .Workorder-form{
 .WorkorderForm-main{
  width: 100%;
  .el-table td, .el-table th.is-leaf{
    border-bottom: 0px solid #EBEEF5;
  }
  .btn{
    button{
      width: 70px;
      height: 32px;
      padding: 0;
      // border: 1px solid transparent;
      font-size: 13px;
      color: #666560;
      background-color: #dbdbdb;
      &:nth-child(1){
        margin-right: 20px;
      }
    }
  }
}
  }
</style>
